<template>
    <div class="app-container">
        <el-form ref="formRef" label-width="80px" :model="form" :rules="rules" class="search-form">
            <el-form-item prop="country" label="发布国家" class="bg-gray-100 p-4 rounded">
                <el-radio-group v-model="form.country" class="radio-group">
                    <el-radio label="马来西亚"></el-radio>
                    <el-radio label="文莱"></el-radio>
                    <el-radio label="新加坡"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="pushLang" label="发布语言" class="bg-gray-100 p-4 rounded">
                <LangCheckBox
                    v-model="form.pushLang"
                    :options="languages"
                    @change="handleCheckboxChange($event)"
                />
            </el-form-item>
            <el-form-item prop="lastCateGory" label="上级分类" class="bg-gray-100 p-4 rounded">
                <el-cascader v-model="form.last" :options="options" @change="handleChangeCas" />
            </el-form-item>
            <el-form-item prop="pushLang" label="分类名称" class="bg-gray-100 rounded p-4">
                <div class="w-[400px]">
                    <el-input
                        v-for="item in filteredLanguages"
                        :key="item.value"
                        v-model="item.input"
                        class="w-full mb-4"
                        placeholder="请输入分类名称"
                    >
                        <template #prepend>
                            {{ item.label }}
                        </template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item prop="langBgImg" label="长背景图" class="bg-gray-100 p-4 rounded">
                <ImageUpload v-model="form.langBgImg" :file-type="['png', 'jpg']" />
            </el-form-item>
            <el-form-item prop="shotBgImg" label="短背景图" class="bg-gray-100 p-4 rounded">
                <FileUpload v-model="form.shotBgImg" :file-type="['mp4', 'avi', 'wmv']" :file-size="3000" />
            </el-form-item>
            <el-form-item prop="shotBgImg" label="附件上传" class="bg-gray-100 p-4 rounded">
                <FileUpload v-model="form.shotBgImg" :file-type="['mp4', 'avi', 'wmv']" :file-size="3000" />
            </el-form-item>
            <el-form-item prop="sort" label="排序" class="bg-gray-100 p-4 rounded">
                <el-input-number v-model="form.sort" :min="1" controls-position="right" size="large" />
            </el-form-item>
            <el-form-item label="立即发布" class="bg-gray-100 p-4 rounded">
                <el-switch v-model="form.publish" />
            </el-form-item>
        </el-form>
        <footer class="bg-gray-100 p-4 text-center">
            <el-button type="primary" @click="handleRecord">操作记录</el-button>
            <el-button type="primary" @click="$router.go(-1)">返回</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </footer>
    </div>
</template>

<script setup lang="ts">
import LangCheckBox from '@/components/LangCheckBox/index.vue';
import { ref, reactive, toRefs, computed, getCurrentInstance, ComponentInternalInstance } from 'vue';
import { options } from '../data';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

type LangType = { label: string; value: string; input?: string };
const languages = ref<LangType[]>([
    { label: '英文', value: 'english' },
    { label: '马来文', value: 'malay' },
    { label: '中文', value: 'chinese' },
]);
// 在现有的 languages 数组中添加 input 属性
languages.value.forEach(language => {
    language['input'] = '';
});
type fomrType = {
    country: string;
    pushLang: string[];
    publish: boolean;
    last: string[];
    sort: number;
    langBgImg: string;
    shotBgImg: string;
};
const data = reactive<{
    form: fomrType;
    queryParams: any;
    rules: any;
}>({
    form: {
        country: '马来西亚',
        pushLang: languages.value.map(item => item.value),
        last: [],
        publish: false,
        langBgImg: '',
        shotBgImg: '',
        sort: 1,
    },
    queryParams: {},
    rules: {
        country: [{ required: true, message: '请选择发布国家', trigger: 'change' }],
        pushLang: [{ required: true, message: '请选择发布语言', trigger: 'change' }],
        lastCateGory: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
        langBgImg: [{ required: true, message: '请选择长图背景', trigger: 'change' }],
        shotBgImg: [{ required: true, message: '请选择短图背景', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'change' }],
    },
});
const { form, rules } = toRefs(data);

const filteredLanguages = computed(() => {
    return languages.value.filter(language => form.value.pushLang.includes(language.value));
});

const handleCheckboxChange = (language: any) => {
    if (language.length > 0) {
        const filtered = languages.value.filter(l => !language.includes(l.value));
        const f = filtered[0].value;
        languages.value.filter(filter => filter.value === f)[0]['input'] = ''; // 清空对应的文本框值
    }
};

const handleRecord = () => {
    console.log('操作记录');
};

const handleSubmit = () => {
    /** 提交按钮 */
    (proxy?.$refs['formRef'] as any).validate((valid: any) => {
        if (valid) {
            console.log(valid);
            // if (form.value.deptId !== undefined) {
            //     updateDept(form.value).then(response => {
            //         proxy!.$modal.msgSuccess('修改成功');
            //         open.value = false;
            //         getList();
            //     });
            // } else {
            //     addDept(form.value).then(response => {
            //         proxy!.$modal.msgSuccess('新增成功');
            //         open.value = false;
            //         getList();
            //     });
            // }
        }
    });
};
function handleChangeCas(value: any) {
    console.log(value);
}
</script>
<style scoped lang="scss"></style>
